<template>
  <div class="BookItem" :class="classs" :style="style">
    <slot></slot>
  </div>
</template>

<script lang="ts">
export default {
  name: "BookItem",
  props: {

  },
  computed: {
    doublePage() {
      return this.$parent.doublePage as boolean
    },
    showPage() {
      return this.$parent.showPage as number
    },
    pagesLength() {
      return this.$parent.children.length as number
    },
    findIndex() {
      return this.$parent.children.findIndex(i=>i===this)
    },
    isFirstPage() {
      return this.findIndex === 0
    },
    isLastPage() {
      return this.findIndex + 1 === this.pagesLength
    },
    zIndex() {
      let show = this.showPage - 1
      let result = -1
      for (let i = 0; i < this.pagesLength * 2; i++) {
        if(show - i === this.findIndex) {
          result = this.pagesLength - i
        }
        if (show + i === this.findIndex) {
          result = this.pagesLength - i
        }
      }
      if(this.findIndex>show && this.isLeft) {
        result--
      }
      return result
    },
    style() {
      return {
        zIndex: this.zIndex
      }
    },
    isLeft() {
      if(this.doublePage) {
        return this.findIndex % 2 === 0;
      }
      return true
    },
    classs() {
      if(this.doublePage) {
        if(this.isLeft) {
          return ['pageLeft']
        }
        return ['pageRight']
      }
      return ['PageSize']
    }
  },
  mounted() {
    this.$parent.getChildren()
  }
}
</script>

<style lang="scss" scoped>
.BookItem{
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  margin: 0;
  padding: 0;
}
.PageSize{
  width: 100%;
}
.pageLeft{
  width: 50%;
  left: 0;
}
.pageRight{
  width: 50%;
  right: 0;
}
</style>
